<template>
  <view style="overflow: scroll">
    <image class="base-img" :src="reviewBaseImg" mode="widthFix"></image>
    <tn-button id="print_btn" @click="cusRenderDom" class="btn">打印</tn-button>

    <sp-html2pdf-render
        domId="render-dom"
        ref="renderRef"
        @beforeSavePDF="beforeSavePDF"
        @renderOver="renderOver"
        :auto-open="false"
    ></sp-html2pdf-render>
    <!--    -->
    <view id="render-dom">
      <view class="table" v-for="(item, index) in list" :key="index">
        <view class="title">事 故 照 片</view>
        <table cellspacing="0">
          <tr>
            <td>拍照时间</td>
            <td>{{ item.takeTimeOne }}</td>
            <td>地点</td>
            <td>{{ item.locateOne }}</td>
          </tr>
          <tr>
            <td>方向</td>
            <td>{{ item.directionOne }}</td>
            <td>拍照人</td>
            <td>{{ item.authorOne }}</td>
          </tr>
          <tr>
            <td class="text-col">
              <span style="width: 1em;display: inline-block;">照片{{ index * 2 + 1 }}</span>
            </td>
            <td colspan="3" width="521px" height="324px">
              <img v-if="item.url" width="500px" height="300px"
                   :src="item.url"/>
            </td>
          </tr>
          <tr>
            <td>拍照时间</td>
            <td>{{ item.takeTimeOne }}</td>
            <td>地点</td>
            <td>{{ item.locateOne }}</td>
          </tr>
          <tr>
            <td>方向</td>
            <td>{{ item.directionOne }}</td>
            <td>拍照人</td>
            <td>{{ item.authorOne }}</td>
          </tr>
          <tr>
            <td class="text-col">
              <span style="width: 1em;display: inline-block;">照片{{ index * 2 + 2 }}</span>
            </td>
            <td colspan="3" width="521px" height="324px">
              <img v-if="item.url2" width="500px" height="300px"
                   :src="item.url2">
            </td>
          </tr>
          <tr>
            <td class="text-col">备注</td>
            <td colspan="3">{{ item.remark }}</td>
          </tr>
        </table>

      </view>

    </view>
  </view>
</template>

<script>
import {base64ToPath, urlToBase64} from "@/uni_modules/sp-html2pdf-render/utils";
import {base64ToFile} from "@/utils/typeConversion";
import {uploadLp, uploadLpPdf} from "@/api/lupeiwenshu";

export default {
  props: ['jsonData'],
  data() {
    return {
      reviewBaseImg: '',
      webImageBase: '',
      locImageBase: '',

      list: [],
      isLoading: true,
    };
  },
  created() {
    this.handleImage()
  },
  watch: {
    jsonData: {
      handler(newVal) {
        if (!newVal.length) return []

        this.list = []

        newVal.forEach(async (item) => {
          if (!item.filePathOne.includes('../../')) {
            try {
              // 跨域时 需要后端添加响应头Access-Control-Allow-Origin: *
              item.url = await urlToBase64(item.filePathOne)
            } catch (e) {
              console.log('跨域时 需要后端添加响应头Access-Control-Allow-Origin: *')
              uni.hideLoading()
            }
          }
          if (!item.filePathTwo.includes('../../')) {
            try {
              // 跨域时 需要后端添加响应头Access-Control-Allow-Origin: *
              item.url2 = await urlToBase64(item.filePathTwo)
            } catch (e) {
              console.log('跨域时 需要后端添加响应头Access-Control-Allow-Origin: *')
              uni.hideLoading()
            }
          }
          this.list = [...this.list, item]

          if (this.list.length === newVal.length) {
            this.list = this.list.sort((a, b) => a.orderNo - b.orderNo)

            this.isLoading = false;
          }
        })

      },
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
    },
    async handleImage() {
      /**
       * 使用urlToBase64将图片转换为base64格式，
       * 若图片不支持跨域则可能会报toDataURL on HTMLCanvasElement的错
       * 在hbuilderx内置浏览器中可能不会跨域，因为内置浏览器解除了跨域限制
       * 终极大法是将网络图片通过工具转换为base64保存至文件中再放入image标签里
       */
      // urlToBase64('https://repair.qiantaolu.com/2025/08/12/19551035787005173781.jpg')
      //     .then((res) => {
      // this.webImageBase = res
      // })

    },
    cusRenderDom() {
      this.$refs.renderRef.h2pRenderDom()
    },
    renderOver(e) {
      // e为导出的图片（base64）
      // console.log('e', e);
      const file = base64ToFile(e, 'fjtp', 'png');
      console.log(file)
      base64ToPath(e).then(path => {
        uploadLp({
          filePath: e
        }).then(res => {
          this.$emit('upload', {...res, path})
        }).catch(err => {
          console.log('err', err)
          this.$emit('upload', {code: 500})
        })

      })
    },
    beforeSavePDF(e) {
      // e为导出的pdf（base64）
      // console.log('==== beforeSavePDF :', e);
      return

      const file = base64ToFile(e, 'jzjp021212.pdf', 'pdf');
      base64ToPath(e).then(path => {

        // this.$emit('upload', {
        //   ...{
        //     code: 0,
        //     data: {
        //       url: 'http://47.92.235.205/lppdf/2025/08/13/1955435227065749506.pdf'
        //     }
        //   },
        //   path
        // })
        // return

        uploadLpPdf({
          file,
        }).then(res => {
          this.$emit('upload', {...res, path})
        }).catch(err => {
          console.log('err', err)
          this.$emit('upload', {code: 500})
        })
      })

    },
  }
};
</script>
<style scoped lang="scss">
#render-dom {
  width: 794px;
  font-family: "宋体";
  padding: 0 70px;

  .table {
    height: 1123px;
    border: 1px solid rgba(7, 7, 7, 0);
  }

  .title {
    line-height: 140px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
  }

  .sgzp {
    margin-top: 54px;
    margin-bottom: 24px;
    font-size: 24px;
    text-align: center;
    font-weight: bold;
  }

  table {
    font-size: 16px;
    margin: 0 auto;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;

    td {
      border-left: 1px solid #000000;
      border-top: 1px solid #000000;
      text-align: center;
      padding: 10px;
    }

    td:nth-of-type(1) {
      width: 40px;
    }
  }


}
</style>
